<template>
  <Modal
      v-model="addStudentModal"
      v-bind:title="modalTitle"
      :scrollable="true"
      class-name="vertical-center-modal"
      :mask-closable="false"
      @on-cancel="resetForm('studentInfoForm')"
     >
      <Form
        ref="studentInfoForm"
        :label-width="55"
        :model="studentInfo"
        :rules="studentInfoRules"
      >
        <!--照片-->
        <Row type="flex" justify="center" style="margin-bottom: 5px">
          <div style="margin-bottom: 10px">
            <a href="javascript:void(0)" class="staff-file" ref="avatar_staff">
              <input
                type="file"
                ref="avatar_input"
                accept="image/png, image/jpeg, image/jpg"
                @change="preview_staff"
                title=""
              >
            </a>
          </div>
        </Row>
        <Row type="flex" justify="space-between">
          <Col style="width: 48.5%">
            <FormItem label="姓名" prop="user_name">
              <Input v-model.trim="studentInfo.user_name" placeholder="请填写姓名"/>
            </FormItem>
            <FormItem label="性别" prop="user_sex">
              <RadioGroup v-model="studentInfo.user_sex">
                <Radio label="1">男</Radio>
                <Radio label="0">女</Radio>
              </RadioGroup>
            </FormItem>
            <FormItem label="学校" prop="user_school">
              <Input
                placeholder="请填写学校"
                style="width: 100%"
                v-model.trim="studentInfo.user_school"
              />
            </FormItem>
            <FormItem label="邮箱" prop="user_email">
              <Input placeholder="请填写邮箱" v-model.trim="studentInfo.user_email"/>
            </FormItem>
          </Col>
          <Col style="width: 48.5%">
            <FormItem label="学号" prop="user_num">
              <Input
                placeholder="请填写学号"
                style="width: 100%"
                v-model.trim="studentInfo.user_num"
              />
            </FormItem>
            <FormItem label="电话" prop="user_phone">
              <Input placeholder="电话（可选）" v-model.trim="studentInfo.user_phone"/>
            </FormItem>
            <FormItem label="班级" prop="user_class">
              <Input
                placeholder="请填写班级"
                style="width: 100%"
                v-model.trim="studentInfo.user_class"
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
      <div slot="footer">
        <Button type="primary" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
</template>
<script>
import {
  addStudent
} from "../../../controllers/student";

export default {
  name: "add-student",
  data: () => {
    return {
      addStudentModal: false,
      modalTitle: "添加至学生",
      studentInfo: {
        user_name: "",
        user_sex: "",
        user_avatar: "",
        user_num: "",
        user_school: "",
        user_class: "",
        user_phone: "",
        user_email: "",
      },
      studentInfoRules: {
          user_name: [
            { required: true, message: "姓名不可以为空", trigger: "blur" }
          ],
          user_num: [
              {required: true, message: "学号不可以为空", trigger: "blur"}
          ],
          user_sex: [
              {required: true, message: "请选择性别", trigger: "blur"}
          ],
          user_school: [],
          user_class: [],
          user_email: [
            { type: "email", message: "邮箱格式不正确", trigger: "blur" }
          ],
          user_phone: [
            {
              pattern: /^1\d{10}$/,
              message: "电话格式不正确",
              trigger: "blur"
            }
          ]
      },
    };
  },
  created() {},
  methods: {
    cancel() {
      this.addStudentModal = false;
    },
    showModal(row){
      const avatar = row.rec_capture;
      avatar && (this.$refs['avatar_staff'].style.backgroundImage = "url(" + avatar + ")");
      this.studentInfo.user_avatar = avatar?avatar.split(',')[1]:'';
      this.addStudentModal = true;
    },
    preview_staff(e) {
      this.preview(e, "avatar_staff", "staff");
    },
    preview(e, id, type) {
      let file = e.target.files[0];
      ImageUtils.compress(
        file,
        {
          compress: {
            width: 480,
            height: 480,
            quality: 0.8
          },
          type: "file"
        },
        (res, w, h) => {
          if (res) {
            let reader = new FileReader();
            reader.onload = () => {
              this.$refs[id].style.backgroundImage =
                "url('" + reader.result + "')";
              // this.studentInfo.user_avatar = reader.result;
              this.studentInfo.user_avatar = reader.result.split(",")[1];
              reader.onload = null;
            };
            reader.readAsDataURL(res);
          } else {
            this.$Message.error("图片过大，请更换");
          }
        }
      );
    },
    handleSubmit() {
      if(!this.studentInfo.user_avatar) return this.$Message.error("头像不能为空!");
      this.$refs["studentInfoForm"].validate(async valid => {
        if (!valid) {
          this.$Message.error("请检查输入!");
          return;
        }

        addStudent(
          this.studentInfo
        ).then(res => {
          if (res.code == 0) {
            this.$Message.success("提交成功!");
            this.addStudentModal = false;
            this.$refs["studentInfoForm"].resetFields();
          }
        });
      });
    }
  }
};
</script>